<template>
	<view class="pageContain">
		<view @click="fristCurrent(item)" class="row">{{firstTitle}}</view>
		<view @click="upCurrent(item)" class="row">{{upTitle}}</view>
		<view class="midClass">
			{{currentPage}}/{{totalPage}}
		</view>
		<view @click="downCurrent(item)" class="row">{{downTitle}}</view>
		<view @click="endCurrent(item)" class="row">{{endTitle}}</view>
	</view>

</template>

<script>
	export default {
		"name": 'MPagination',
		"props": {
			"currentPage": {
				type: Number,
				default: 1
			},
			"totalPage": {
				type: Number,
				default: 12

			},
			"showPage": {

				type: Number,
				default: 3

			},
			"firstTitle": {

				type: String,
				default: '首页'

			},
			"endTitle": {

				type: String,
				default: '尾页'

			},
			"upTitle": {

				type: String,
				default: '上一页'

			},
			"downTitle": {

				type: String,
				default: '下一页'

			}
		},
		data() {
			return {

				chooseIndex: 1,
				item: 0
			}
		},
		mounted() {

		},
		methods: {
			handleCurrent(item) {
				if (item == '...') {
					return;
				}
				this.chooseIndex = item;
				// this.currentPage=item;
				this.$emit('pageNum', item);
				this.$emit('update:currentPage', item);


			},
			fristCurrent() {
				this.handleCurrent(1);
			},
			endCurrent() {
				this.handleCurrent(this.totalPage);
			},
			upCurrent() {
				if (this.currentPage == 1) {
					return
				}
				this.handleCurrent(this.currentPage - 1);
			},
			downCurrent() {
				if (this.currentPage == this.totalPage) {
					return
				}
				this.handleCurrent(this.currentPage + 1);
			}
		}

	}
</script>

<style>
	.pageContain {
		display: flex;
		justify-content: center;
	}

	.midClass {
		width: 180rpx;
		background: #3185FC;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.row {
		width: 100rpx;
		margin: 0 20rpx;
		background: #efefef;
		font-size: 24rpx;
		text-align: center;
		line-height: 56rpx;
		height: 56rpx;
		border: 1rpx solid #c1c1c1;
	}
</style>